<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
#countDown,.btn,.content {
  width: 735px;
}
#countDown{
  font-size: 100px;
  height: 300px;
  text-align: center;
  line-height: 200px;
  color: #fff;
}
body{
  background: url('./bj.jpg');
}
.btn{
  margin-left: 2px;
}
.btn button{
  width: 100px;
  height: 40px;
  border: none;
  background: #d72502;
  color: #fff;
  border-radius: 5px;
  padding: 0;
  margin: 0;
  display: block;
  float: left;
  margin-right: 5px;
  outline: none;
}
.content{
  position: fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  overflow: hidden;
  padding:10px;
  background:rgba(0,0,0,.4);
  border-radius: 5px;
}

.currentDate {
  text-align: center;
  color: #ccc;
  font-size: 25px;
}
</style>
<body>
  <div class="content">
    <div class="btn">
      <button onClick="CountDown(10)">下课休息</button>
      <button onClick="stopCountDown()">清除</button>
      <button onClick="CountDown(2)">练习2分钟</button>
      <button onClick="CountDown(5)">练习5分钟</button>
      <button onClick="CountDown(10)">练习10分钟</button>
      <button onClick="CountDown(15)">练习15分钟</button>
      <button onClick="stopCountDown()">关闭铃声</button>
    </div>
    <div id="countDown">00:00</div>
    <div class="currentDate">当前时间：<span id="currentDate">00:00:00</span></div>
  </div>
  <audio loop src="http://downsc.chinaz.net/files/download/sound1/201301/2575.wav"></audio>
  <script>
    getCurrentDate()
    var id = 0
    function CountDown(month){
      if(id!==0) clearInterval(id)
      var date = month*60
      id = setInterval(()=>{
        if(date === 0){
          clearInterval(id)
          document.querySelector('audio').play()
          return
        }
        date--
        const month = Math.floor(date/60).toString().padStart(2,0)
        const second = (date%60).toString().padStart(2,0)
        const dateStr = month+':'+second
        document.getElementById('countDown').innerHTML=dateStr
        
      },1000)
    }

    function stopCountDown() {
      console.log(123)
      document.querySelector('audio').pause()
      clearInterval(id)
      document.getElementById('countDown').innerHTML='00:00'
    }

    function getCurrentDate () {
      var currentDate =  new Date
      var y = currentDate.getFullYear().toString()
      var m = (currentDate.getMonth()+1).toString().padStart(2,0)
      var d = currentDate.getDate().toString().padStart(2,0)
      var h = currentDate.getHours().toString().padStart(2,0)
      var mm = currentDate.getMinutes().toString().padStart(2,0)
      var s = currentDate.getSeconds().toString().padStart(2,0)
      document.getElementById('currentDate').innerHTML = y+'-'+m+'-'+d+' ' +h+':'+mm+':'+s
    }

    setInterval(function(){
      getCurrentDate()
    },1000)
  </script>
</body>
</html>